import { useState } from 'react'
import { Input, NavBar, TextArea } from 'antd-mobile'

import styles from './index.module.scss'
type props = {
  onClose: () => void
  type: '' | 'name' | 'intro'
  value: string
  onUpdateName: (type: 'name' | 'intro', name: string) => void
}

const EditInput = ({ onClose, value, type, onUpdateName }: props) => {
  const [inputValue, inputSetName] = useState(value)

  const isEidt = type === 'name'
  return (
    <div className={styles.root}>
      <NavBar
        className="navbar"
        onBack={onClose}
        right={
          <span
            className="commit-btn"
            onClick={() => {
              if (type === '') return
              onUpdateName(type, inputValue)
            }}
          >
            提交
          </span>
        }
      >
        编辑{isEidt ? '昵称' : '简介'}
      </NavBar>

      <div className="edit-input-content">
        <h3>{isEidt ? '昵称' : '简介'}</h3>

        {isEidt ? (
          <div className="input-wrap">
            <Input
              placeholder="请输入"
              value={inputValue}
              onChange={(value) => inputSetName(value)}
            />
          </div>
        ) : (
          <TextArea
            className="textarea"
            value={inputValue}
            onChange={(value) => {
              inputSetName(value)
            }}
            rows={4}
            showCount
            maxLength={100}
          />
        )}
      </div>
    </div>
  )
}

export default EditInput
